<template>
  <div>
    <el-dialog
      title="地址详情"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="forms" :rules="rules" :model="addressList" label-width="120px" :inline="false" size="small">
        <el-form-item label="发货地址" prop="addressName">
          <el-input v-model="addressList.addressName " style="width:70%" placeholder="发货地址" />
        </el-form-item>
        <el-form-item label="发货人姓名" prop="name">
          <el-input v-model="addressList.name" style="width:70%" placeholder="发货人姓名" />
        </el-form-item>
        <el-form-item label="发货人手机号" prop="phone">
          <el-input v-model="addressList.phone" style="width:70%" placeholder="发货人手机号" />
        </el-form-item>
        <el-form-item label="邮政编码" prop="postCode">
          <el-input v-model="addressList.postCode" style="width:70%" placeholder="邮政编码" />
        </el-form-item>
        <el-form-item label="收货地址" prop="province">
          <el-cascader
            v-model="selectedOptions"
            style="width:70%"
            placeholder="请选择"
            size="large"
            :options="options"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input v-model="addressList.detailAddress " style="width:70%" placeholder="详细地址" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { save as saveApi, update } from '@/api/order/address'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  data() {
    var cityCodes = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮政编码不能为空'))
      } else {
        var code = /^[0-9]\d{5}$/
        if (!code.test(Number(value))) {
          callback(new Error('邮政编码格式错误'))
        } else {
          callback()
        }
      }
    }
    var phones = (rule, value, callback) => {
      console.log(Number(value))
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        var code = /^((13\d)|(14[5,7,9])|(15[0-3,5-9])|(166)|(17[0,1,3,5,7,8])|(18[0-9])|(19[8,9]))\d{8}$/
        // var num = code.test(Number(value))
        // console.log(num)
        if (!code.test(Number(value))) {
          callback(new Error('手机号码格式错误'))
        } else {
          callback()
        }
      }
    }
    return {
      options: regionData, // 地市数据信息对象
      selectedOptions: [], // 地市选择结果
      dialogVisible: false,
      addressList: {
      },
      rules: {
        addressName: [
          { required: true, message: '请输入发货人地址', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入发货人姓名', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请输入收货地址', trigger: 'blur' }
        ],
        detailAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        postCode: [
          { required: true, validator: cityCodes, trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: phones, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {

  },
  created() {
  },
  mounted() {

  },
  methods: {
    handleChange(value) {
      console.log(value)
      this.addressList.cityCode = value.join()
      this.addressList.province = CodeToText[value[0]]
      this.addressList.city = CodeToText[value[1]]
      this.addressList.region = CodeToText[value[2]]
      console.log(this.addressList)
    },
    open() { // 通过父组件调用打开弹窗
      if (this.addressList.id) {
        this.selectedOptions = this.addressList.cityCode.split(',')
        console.log('1111111', this.selectedOptions)
        this.dialogVisible = true
      } else {
        this.selectedOptions = []
        this.dialogVisible = true
      }
    },
    cancel() { // 取消
      this.dialogVisible = false
      this.$refs.forms.resetFields()
    },
    determine() { // 遮罩层确定
      this.$refs.forms.validate((valid) => {
        if (valid) {
          if (this.addressList.id) {
            update(this.addressList).then(res => {
              const { success, message: errMge } = res
              if (success) {
                this.$message.success('编辑成功')
                this.dialogVisible = false
                this.$parent.init()
              } else {
                this.$message.error(errMge)
              }
            })
          } else {
            saveApi(this.addressList).then(res => {
              const { success, message: errMge } = res
              if (success) {
                this.$message.success('新增成功')
                this.dialogVisible = false
                this.$parent.init()
              } else {
                this.$message.error(errMge)
              }
            })
          }
        } else {
          this.$message.error('请注意表单验证')
          return false
        }
      })
    },

    handleClose() { // 右上角x
      this.dialogVisible = false
    }

  }
}
</script>

<style scoped lang="scss">

</style>
